<template>
<div>
  <van-tabs v-model="active">
    <van-tab title="简介">
      <van-collapse v-model="activeNames">
        <van-collapse-item
            v-for="item of list"
            :key="item.id"
            :name="item.id"
            :title="item.title">
          <div v-html="textareaTo(item.content)"></div>
        </van-collapse-item>
      </van-collapse>
    </van-tab>
    <van-tab title="专家">
      <div style="padding: 20px"
           v-for="(item,index) of team" :key="index">
        <div style="display: flex;justify-content: space-between;align-items: center">
          <span style="color: #409EFF">{{item.specialistName}}</span>
          <span>{{item.nationality}}专家</span>
        </div>
        <van-divider />
        <div style="text-align: center">
          <van-image width="150px" :src="item.headPicture" />
        </div>
        <div>
          <div v-html="item.introduce"></div>
        </div>
      </div>
    </van-tab>
  </van-tabs>

</div>
</template>

<script>
import { company } from "@/api";
import {getTeam } from "@/api/team";

export default {
  name: "jianjie",
  data() {
    return {
      list:[],
      activeNames: [1],
      active:Number(this.$route.query.active) || 0,
      team:[]
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList(){
      getTeam().then(({records})=>{
        console.log(records)
        this.team = records
      })
      const res = await company()
      this.list = res
      console.log(res)
    },
    textareaTo(str) {
      const regs = new RegExp("\r", "g");
      const reg = new RegExp("\n", "g");
      const regSpace = new RegExp(" ", "g");
      str = str.replace(reg, "<br/>");
      str = str.replace(regs, "<br/>");
      str = str.replace(regSpace, "&nbsp;");
      return str;
    }
  }
}
</script>

<style scoped>
>>>.van-tabs__line{
  background-color: var(--theme);
}
</style>
